const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require("mini-css-extract-plugin");

function createHtml(filename, template, chunks) {
  return new HtmlWebpackPlugin({
    filename,
    template,
    inject: true,
    minify: {
      removeComments: true,
      collapseWhitespace: true,
      removeAttributeQuotes: true,
    },
    chunksSortMode: "auto",
    // 关键的是这里，配置这个html 包含 login 相关的模块
    // chunks: ["manifest", "vendor", "login"],
    chunks,
  });
}

const extractSass = new ExtractTextPlugin({
  filename: "[name].[contenthash].css"
});

module.exports = {
    mode: 'development',
  entry: {
    app: path.resolve(__dirname, "./src/index.js"),
    print: path.resolve(__dirname, "./src/index.js"),
  },
  output: {
    filename: "[name].bundle.js",
    path: path.resolve(__dirname, "dist"),
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          { loader: ExtractTextPlugin.loader },
        //   {
        //     loader: "style-loader",
        //   },
          {
            loader: "css-loader",
          },
          {
            loader: "sass-loader",
          },
        ],
      },
    ],
  },
  plugins: [createHtml("index.html", "index.html", ["app"]), extractSass],
};
